<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<TITLE>room maker</TITLE>
<script src="scripts/jsDraw2Db.js" type="text/javascript"></script>
</head>
<body topmargin="0" leftmargin="0">
<br>
<div id="table position" style="position: absolute; top: 0px; left: 0px; height:480px; width:100%">
<table border="0" cellpadding="0" cellspacing="0">
<tr><td valign="top" width ="640" height="480">
<div id="canvas" style="position: absolute; top: 0px; left: 0px; width:640px; height:480px;z-index:1"></div></td>

<td valign="top"><small>Not for use in the game. The game uses much simpler saving.<br>
LocalStorage is unsafe for long term storage of rooms:<br>
Cannot be accessed directly. But rooms only need 1 build, then tweak the text.</br></small>
<big><big>&nbsp <font id="roomNumName">room1</font></big></big>
<button onclick="loadRoom(0)">previous room</button>
<button onclick="loadRoom(1)">next room</button>
<button onclick="saveRoom()">SAVE</button>
<textarea style="height:20px;width:430px" id="roomName">unnamed room</textarea>
<hr style=" width: 100%; height: 8px;">

<strong>Floors and regions:</strong><br>
They are only rectangles. Just type in the coordinates, how hard can it be?<br>

<hr style=" width: 100%; height: 8px;">


<big>hotspots</big><br>
<small>&nbsp&nbsp(shapes made with the js2Draw2D library, licensed under LGPL)<br></small>
<input style="font-weight:bold" type="submit" value="< previous shape" onclick="nextShape(0);"/>
<input style="font-weight:bold" type="submit" value="> next shape" onclick="nextShape(1);"/>
<input style="font-weight:bold" type="submit" value="Clear current shape" onclick="clearCurrentShape();"/>
<input style="font-weight:bold" type="submit" value="Clear Canvas" onclick="clearAll();"/>
<div id="currentNum">&nbsp Shape: 0</div>
<textarea style="height:20px;width:430px" id="hotspotName"></textarea>
<input style="font-weight:bold" type="submit" value="save hotspot name" onclick="saveHotspotName();"/>
<hr style=" width: 100%; height: 8px;">

<button onclick="changeTitle()">Change title</button>
</td></tr></table></div>

<div id="main text position" style="position: absolute; top: 480px;">
<textarea style="height:250px;width:1100px" id="txt" ></textarea></div>
<script type="text/javascript">
	// data ---------------------------------
	var points=new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array());
	var hotspotNames=new Array(hotSpotMax);// drawpoint adds new array spaces and fills them with 'jsPoint'
	var whichPoints =0;
	var whichRoom =1;
	var roomMax =3;
	// for drawing --------------------------
	var canvasDiv=document.getElementById("canvas");
	var gr=new jsGraphics(canvasDiv);
	var pen;
	pen=new jsPen(new jsColor("blue"),2);
	var hotSpotMax =15;
	var ie=false;
	if(document.all)	ie=true;
	var mouseX =0;	var mouseY =0;
canvasDiv.onmousemove = getMouseXY;
canvasDiv.onclick =drawPoint;
//-------------------------------------------------
function changeTitle()
{ document.title = "The new title goes here."; }

function getMouseXY(e)
{  if(ie){  mouseX = event.clientX + document.body.parentElement.scrollLeft;
    		mouseY = event.clientY + document.body.parentElement.scrollTop;
 	} else { mouseX = e.pageX;
    			  mouseY = e.pageY; 	}  
  mouseX =mouseX - canvasDiv.offsetLeft;
  mouseY =mouseY - canvasDiv.offsetTop;
}
function saveHotspotName(){ if(document.getElementById("hotspotName").value !="")
									hotspotNames[whichPoints] =document.getElementById("hotspotName").value; 
							refreshText(); document.getElementById("hotspotName").value ="";}
function nextShape(next){saveHotspotName();	if(next)whichPoints++; else whichPoints--;
						if(whichPoints >=hotSpotMax)whichPoints =0; if(whichPoints <0)whichPoints =hotSpotMax -1; 
						document.getElementById("currentNum").innerHTML="&nbsp Shape: " +whichPoints;	
						reDrawPolys(); refreshText();
						if((hotspotNames[whichPoints] !=null )&&(hotspotNames[whichPoints] !="")) 
							document.getElementById("hotspotName").value =hotspotNames[whichPoints];
}
function refreshPic()
{	canvasDiv.innerHTML="<img style=\" width: 640px; height: 480px;\" alt=\"renamed for image map\" src=\"developer_only/sample_pic.jpg\" align=\"left\">";	
}
function clearAll()
{	refreshPic();points=new Array(new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array(),new Array());	}
function reDrawPolys()
{	for(var n=0;n<hotSpotMax;n++)
	{	if(n ==whichPoints)pen=new jsPen(new jsColor("red"),3);
		else pen=new jsPen(new jsColor("blue"),2);
		if(points[n][1])gr.drawPolygon(pen,points[n]);
	}
}
function refreshText()
{	var txt=document.getElementById("txt");	txt.value="";
	for(var n=0;n<hotSpotMax;n++)
	{	if(n ==whichPoints)txt.value=txt.value +">>>>>> ";
		txt.value=txt.value +"<area shape=\"poly\" id=\"hot"+n+"\" name=\""+hotspotNames[n]+"\" coords=\"";
		for(var i=0;i<points[n].length;i++)
		{	if(i >0)txt.value=txt.value +", ";
			txt.value=txt.value + points[n][i].x + "," + points[n][i].y ;
		}txt.value=txt.value +"\">\n";
	}
}
function drawPoint()
{	refreshPic();	
	gr.fillRectangle(new jsColor("green"),new jsPoint(mouseX-8,mouseY-8),8,8);
	points[whichPoints][points[whichPoints].length]=new jsPoint(mouseX-3,mouseY-3);
	reDrawPolys();
	refreshText();
}

function notReadyMessage(){alert("Sorry, that feature hasn't been coded yet");}
function clearCurrentShape(){	refreshPic();
								points[whichPoints] =new Array;
								reDrawPolys(); refreshText(); }

// COOKIES -----------------------------------------------------------------------------------------------
// treat document.cookie like a string. (Actually it isn't, and you have only access to a name-value pair.)
// since each cookie has just one value, setting it must erase the old one. Use a string value to squeeze in more data.
// browsers decide where to put them. You just decide the name. Some browsers only allow 30 per domain (some hint at 20)
// IE8 

function saveRoom()	
{	// room name -----------------------------------------------
	var roomName =document.getElementById("roomName").value;
	var cookieString =roomName +"#";
	// floors --------------------------------------------------
	
	// regions -------------------------------------------------
	
	// hotspots ------------------------------------------------
	for(var n=0;n<hotSpotMax;n++)
	{	if(n>0)cookieString =cookieString +"|";				// separate hotspots
		cookieString =cookieString+hotspotNames[n]+"^";
		for(var i=0;i<points[n].length;i++)
		{	if(i>0)cookieString =cookieString +":";
			cookieString =cookieString + points[n][i].x +","+ points[n][i].y; 
		}
	}
	// save string
	window.localStorage.setItem(document.getElementById("roomNumName").innerHTML,cookieString);
}
function loadRoom(up)
{	clearAll();												// empty existing string arrays
	// get number +cookie name ---------------------------------
	if(up)whichRoom++; else whichRoom--; 
	if(whichRoom >roomMax) whichRoom =1; if(whichRoom <1) whichRoom =roomMax; 
	document.getElementById("roomNumName").innerHTML="room"+whichRoom;	
	
	// get cookie ----------------------------------------------
	var cookieString=window.localStorage.getItem(document.getElementById("roomNumName").innerHTML);
	if(!cookieString){alert("Sorry, I can't find a saved cookie called "+document.getElementById("roomNumName").innerHTML);return;}
	
	// split off NAME ------------------------------------------
	var arrayAll =cookieString.split("#");					// roomName plus the rest
	var arrayLeft =arrayAll[0];
	var arrayRight =arrayAll[1];
	document.getElementById("roomName").value =arrayLeft;
	
	// split off FLOORS ----------------------------------------
															//TO BE COMPLETED
	
	// split off REGIONS ---------------------------------------
															//TO BE COMPLETED

	// split off HOTSPOTS --------------------------------------
	arrayAll =arrayRight.split("|");						// each array space now contains a shape
	var arrayLength =arrayAll.length;
	for(var n=0;n<arrayLength;n++)
	{	var oneHotspot =arrayAll[n].split("^");		 		// two parts: name, and all coordinates
		hotspotNames[n] =oneHotspot[0];						// save the name
		var allPoints =oneHotspot[1].split(":");			// many parts: x,y x,y x,y 
		var howManyPoints =allPoints.length;
		for(var i=0;i<howManyPoints;i++)
		{	var onePoint =allPoints[i].split(",");			// separate x,y
			points[n][i] =new jsPoint(onePoint[0],onePoint[1]);// save each x and y 
		}	
	}
	// display
	whichPoints =0;
	document.getElementById("hotspotName").value =hotspotNames[whichPoints];
	reDrawPolys(); refreshText();
}					
</script>
</body>
</html>